iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 8
0
Modern Web

前端入門學徒-30天學習心路系列 第 10

【Day10】文字排版/清除浮動clear

  • 分享至 

  • xImage
  •  
  1. 整理 introduce-list 內的文字排版
<h1>年成長階段</h1>    <!--h1是指標題1-->
 <p>施肥</p>    <!--p是指段落-->
 <p>包袋</p>
 <p>採收</p>
 <p>裝箱</p>
 <p> 配送</p>

2.在 introduce-img 中放入圖片:

<div class="introduce-img">
<img src="image/introduce-img/1.jpg">
<img src="image/introduce-img/2.jpg">
<img src="image/introduce-img/3.jpg">
</div>

3.浮動float & 清除浮動clear
要讓其他 div不被前面的 float: right影響
→用clear: right就可以清除靠右的影響,往下去編排,Clear 後面可以有三種選擇: right, left, both(被卡在中間時)

放棄不是不思進取,恰到好處的放棄,
正是為了更好地進取。


上一篇
【Day9】樣板template/區塊元素改左右編排
系列文
前端入門學徒-30天學習心路10
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言